<%--
  Created by IntelliJ IDEA.
  User: zhangDongFei
  Date: 2020/11/15
  Time: 14:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>

</head>
<body>

<%----------------------------------------模糊查询-------------------------------------------------------%>
<div class="layui-elem-field">
    <form class="layui-form layui-form-pane" id="searchNewsFrom">
        <div class="layui-row">
            <div class="layui-inline layui-col-md-offset1">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" placeholder="姓名">

                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <input type="text" name="rname" class="layui-input" placeholder="角色">
                </div>
                <button type="button" data-type="reload"
                        class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search"
                        lay-submit lay-filter="searchBtn">搜索
                </button>
            </div>
        </div>
    </form>
</div>



<%---------------------------------------------添加员工弹出框-----------------------------------%>
<div id="addGustForm">
    <form class="layui-form layui-from-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">名字</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" id="blurname">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">入职时间</label>
            <div class="layui-input-inline">
                <input type="date" name="rzdate" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="jueseid" id="juese">
                    <option value="0" selected>请选择职位</option>
                   <%-- <option value="1">董事长</option>
                    <option value="2">大堂经理</option>
                    <option value="3">总经理</option>
                    <option value="4">保安大队长</option>--%>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select name="deptid" id="dept">
                    <option value="0" selected>请选择部门</option>
                    <option value="1">人事部</option>
                    <option value="2">财政部</option>
                    <option value="3">后勤部</option>
                    <option value="4">大堂部</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" id="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>



<%----------------------------------------------修改  弹出框---------------------------------------------------------%>
<div id="updGustForm">
    <form class="layui-form layui-from-pane" action="" lay-filter="modify">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-inline">
                <input type="text" name="id" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名字</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" id="blurname1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">离职时间</label>
            <div class="layui-input-inline">
                <input type="date" name="lzdate"  placeholder="请输入" autocomplete="off" class="layui-input" id="lzdate">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status" id="status">
                    <option value="0" >在职</option>
                    <option value="1" id="lz">离职</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="jueseid" id="rid">
                    <%--<option value="1">董事长</option>
                    <option value="2">大堂经理</option>
                    <option value="3">总经理</option>
                    <option value="4">保安大队长</option>--%>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select name="deptid" id="did">
                    <%--<option value="1">人事部</option>
                    <option value="2">财政部</option>
                    <option value="3">后勤部</option>
                    <option value="4">大堂部</option>--%>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" id="formDemo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addGust">添加</button>
    </div>
</script>
 
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<%-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>
</body>
<script>
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var $=layui.jquery;
        var form=layui.form;
        var role ;
        var rid;
        var dept;
        var did;


        var condition="";
        $("#addGustForm").hide();
        $("#updGustForm").hide();
        $(function () {
            showTable()
        })
        function showTable(){
            table.render({
                elem: '#test' //id为test的table

                ,page:true
                ,limit:5
                ,limits:[5,10,15]
                ,request:{
                    pageName:"curr"
                    ,limitName:"nums"
                },
                where:{condition:condition}
                ,url:'${pageContext.request.contextPath}/yg?method=showTable'   //url 查询数据   所有的客户的数据
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '客户数据表'
                //data[{ id:12,name:123}]
                ,cols: [[
                    {field:'id', title:'ID',fixed: 'left',  sort: true}
                    ,{field:'name', title:'姓名'}
                    ,{field:'rzdate', title:'入职时间',sort: true}
                    ,{field:'address', title:'地址',sort: true,}
                    ,{field:'status', title:'状态',  sort: true,templet: function(res){
                            //res  这一行的内容
                            var f=res.status;//状态值
                            if(f==0){
                                //正常
                                return "在职";
                            }else{
                                return "离职";
                            }

                        }
                    }
                    ,{field:'rname', title:'角色',sort: true}
                    ,{field:'dname', title:'部门',sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
            });
        }

        //模糊查询  增加的sql语句
        form.on('submit(searchBtn)', function (data) {
            condition="";
            // alert(data.field.name);
            if(data.field.name!=null && data.field.name!=="" ){
                condition += " and a.name like '%"+data.field.name+"%' ";
            }
            if(data.field.rname!=null && data.field.rname!==""){
                condition += " and c.name like '%"+data.field.rname+"%' ";
            }
            showTable()
            return false;
        });







        //监听行工具事件  test  表格的id
        table.on('tool(test)', function(obj){
            //obj 代表 一行的内容
            var data = obj.data; //一行的数据
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    // obj.del();//页面删除
                    window.location.href="${pageContext.request.contextPath}/yg?method=del&gid="+data.id;
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){

                $.ajax({
                    async:false,
                    url:"${pageContext.request.contextPath}/yg?method=queryR",
                    type:"post",
                    dataType:"JSON",
                    success:function (data) {
                        role=data;
                        $("#rid").empty();
                        $.each(data,function (index,item) {

                            $("#rid").append("<option value='"+item.id+"'>"+item.name+"</option>");
                        })
                        form.render("select");
                    },error:function () {
                        alert("错误");
                    }

                });

                $.ajax({
                    async:false,
                    url:"${pageContext.request.contextPath}/yg?method=queryD",
                    type:"post",
                    dataType:"JSON",
                    success:function (data) {
                        dept=data;
                        $("#did").empty();
                        $.each(data,function (index,item) {

                            $("#did").append("<option value='"+item.id+"'>"+item.name+"</option>");

                        })
                        form.render("select");

                    },error:function () {
                        alert("错误");
                    }

                });

                $.each(role,function (index, item) {
                    if (data.rname===item.name) {
                        rid = item.id;
                        return;

                    }
                })
                $.each(dept,function (index, item) {
                    if (data.dname===item.name) {
                        did = item.id;
                        return;

                    }
                })
                form.val("modify",{
                    "id":data.id,
                    "name":data.name,
                    "address":data.address,
                    "status":data.status,
                    "jueseid":rid,
                    "deptid":did
                });
                layer.open({
                    title: '修改信息'
                    ,type:1
                    ,area: ['400px', '700px']
                    ,offset: '100px'
                    ,content:$("#updGustForm")
                    ,moveOut:true
                });
                form.on('submit(formDemo)', function(data){
                    //layer.msg(JSON.stringify(data.field));
                    //1.将获取到到的数据保存到数据库
                    $.ajax({
                        url:"${pageContext.request.contextPath}/yg?method=add",
                        data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                        type:"post",

                        success:function(r){
                            // alert(r);
                            layer.closeAll();
                            //刷新一下table
                            table.reload('test',{
                                page:{
                                    curr:1
                                }
                            })

                        },error:function(){

                            alert("服务器错误");
                        }

                    })

                    return false;
                });

                /* layer.prompt({
                     formType: 2
                     ,value: data.email
                 }, function(value, index){
                     obj.update({
                         email: value
                     });
                     layer.close(index);
                 });*/
            }
        });


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);

            switch(obj.event){
                case 'addGust':
                    $.ajax({
                        async:false,
                        url:"${pageContext.request.contextPath}/yg?method=queryR",
                        type:"post",
                        dataType:"JSON",
                        success:function (data) {
                            $.each(data,function (index,item) {
                                $("#juese").append("<option value='"+item.id+"'>"+item.name+"</option>");
                            })
                            form.render("select");
                        },error:function () {
                            alert("错误");
                        }

                    });

                    $.ajax({
                        async:false,
                        url:"${pageContext.request.contextPath}/yg?method=queryD",
                        type:"post",
                        dataType:"JSON",
                        success:function (data) {
                            $.each(data,function (index,item) {
                                $("#dept").append("<option value='"+item.id+"'>"+item.name+"</option>");
                            })
                            form.render("select");
                        },error:function () {
                            alert("错误");
                        }

                    });
                    layer.open({
                        title: '添加员工'
                        ,type:1
                        ,area: ['400px', '500px']
                        ,offset: '100px'
                        ,content:$("#addGustForm")
                        ,moveOut:true
                    });

                    form.on('submit(formDemo)', function(data){
                        //layer.msg(JSON.stringify(data.field));
                        //1.将获取到到的数据保存到数据库
                        $.ajax({
                            url:"${pageContext.request.contextPath}/yg?method=add",
                            data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                            type:"post",

                            success:function(i){
                                alert(i);
                                if (i>0) {
                                    layer.closeAll();
                                    //刷新一下table
                                    table.reload('test', {
                                        page: {
                                            curr: 1
                                        }
                                    })
                                }
                            },error:function(msg){
                                alert("服务器错误")
                            }
                        })
                        return false;
                    });
                    // var data = checkStatus.data;
                    // layer.alert(JSON.stringify(data));
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        $("#blurname").blur(function(){
            var value = this.value;
            var node = this;

            $.ajax({
                url:"${pageContext.request.contextPath}/yg?method=queryOne&addname="+value
                ,type:"post"
                ,async:false
                ,data:{}
                ,success:function (i) {
                    if (i>0) {
                        layer.msg('[' + value + ']已经被占用', {icon: 5});//!,ok,wrong,question,lock,cry,smile
                        $("#formDemo").attr("disabled", true);
                    }else {
                        layer.msg('['+value+']可用',{icon: 5});//!,ok,wrong,question,lock,cry,smile
                        $("#formDemo").removeAttr("disabled");
                    }

                },error:function () {
                   alert("服务器错误");
                }
            })

        });
        $("#lzdate").blur(function () {
            var value = this.value;
            if (value!=""||value!=null){
                $("#status").val(1);
                form.render('select');
            }
        })
    });
</script>
</html>
